<template>
  <div class="header-title">版权/所有权</div>
  <div class="upload">
    <div class="form">
      <div class="form-item">
        <div class="form-item-left">
          <div class="form-label">版权所有：</div>
          <div class="form-input">
            <ElInput placeholder="请输入" v-model="form.owner" />
          </div>
        </div>
        <div class="form-item-rig">
          <el-radio-group v-model="form.ownerFlag">
            <el-radio-button label="显示" />
            <el-radio-button label="不显示" />
          </el-radio-group>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-left">
          <div class="form-label">主办单位：</div>
          <div class="form-input">
            <ElInput placeholder="请输入" v-model="form.unit" />
          </div>
        </div>
        <div class="form-item-rig">
          <el-radio-group v-model="form.unitFlag">
            <el-radio-button label="显示" />
            <el-radio-button label="不显示" />
          </el-radio-group>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-left">
          <div class="form-label">售后联系方式：</div>
          <div class="form-input">
            <ElInput placeholder="请输入" v-model="form.afterSalePhone" />
          </div>
        </div>
      </div>
    </div>
    <div class="table">
      <div class="table-header">
        <div class="table-header-title">
          系统版本：{{ currentVersionList }}
          <span v-if="currentVersionList === versionList[0]"
            >（当前已经是最新版本）</span
          >
        </div>
      </div>
      <div class="table-content">
        <div class="table-content-left">
          <div class="table-content-title">版本列表</div>
          <el-scrollbar class="scroll-y">
            <div
              :class="`table-list ${currentVersionList === it ? 'active' : ''}`"
              v-for="it in versionList"
              @click="setCurrentVersionList(it)"
            >
              {{ it }}
            </div>
          </el-scrollbar>
          <el-button type="primary" @click="updatedVersion">更新版本</el-button>
        </div>
        <div class="table-content-right">
          <div class="table-content-title">更新内容</div>
          <MTable
            :columns="columns"
            :http="sysVersionPageHttp"
            :params="params"
            v-model:isReload="isReload"
            :height="400"
          >
          </MTable>
        </div>
      </div>
    </div>
    <el-button type="primary" @click="submit">应用</el-button>
    <MFormDialog
      v-model="formDialog.visible"
      v-bind="formDialog"
      :fields="dialogFields"
      :httpAdd="sysVersionSave"
      @reload="reload"
      addTitle="更新版本"
    ></MFormDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { columns, dialogFields } from './config'
import {
  updateLogoList,
  updOwnership,
  sysVersionPage,
  sysVersionSave,
  enumQuery
} from '@/api/system/globalSettings'
import { ElMessage } from 'element-plus'

onMounted(() => {
  init()
})

const versionList = ref([])
const currentVersionList = ref('')
const sysVersionPageHttp = async (params) => {
  const res = await sysVersionPage(params)
  versionList.value = res.data.versionList
  if (currentVersionList.value === '') {
    currentVersionList.value = versionList.value[0]
  }
  return {
    data: {
      records: res.data.contentList.records,
      total: res.data.contentList.total
    }
  }
}
const setCurrentVersionList = (it) => {
  currentVersionList.value = it
  params.value.versionNum = it
}
const fileList = ref([])

const radioModel = ref('显示')

// 搜索
const params = ref<any>({
  versionNum: undefined
})

// 重载
const isReload = ref(true)
const reload = () => {
  isReload.value = true
}

//表单
const form = reactive({
  afterSalePhone: '',
  owner: '',
  ownerFlag: '显示',
  unit: '',
  unitFlag: '显示'
})

const init = () => {
  updateLogoList().then((res) => {
    let data = JSON.parse(
      res.data.find((i) => i.configKey === 'sys.index.version').configValue
    )
    form.afterSalePhone = data.afterSalePhone
    form.owner = data.owner
    form.ownerFlag = data.ownerFlag === 'YES' ? '显示' : '不显示'
    form.unit = data.unit
    form.unitFlag = data.unitFlag === 'YES' ? '显示' : '不显示'
    console.log(form)
  })
  enumQuery('com.hbsys.common.core.enums.VersionTypeEnum')
    .then((res) => {})
    .catch((res) => {
      dialogFields.find((i) => i.key === 'type').attrs.options = res.data.map(
        (i) => {
          let obj = Object.values(i)[0]
          return {
            label: obj.desc,
            value: obj.value
          }
        }
      )
    })
}

const loading = ref(false)
const submit = () => {
  if (form.ownerFlag === 1 && form.owner === '') {
    ElMessage.error('请输入版权所有！')
    return false
  }
  if (form.unitFlag === 1 && form.unit === '') {
    ElMessage.error('请输入主办单位！')
    return false
  }
  let data = {
    ...form,
    ownerFlag: getFlag(form.ownerFlag),
    unitFlag: getFlag(form.unitFlag)
  }
  console.log(data)
  loading.value = true
  updOwnership(data)
    .then((res) => {
      ElMessage.success('应用成功')
    })
    .finally(() => {
      loading.value = false
    })
}

const getFlag = (name) => {
  return name === '显示' ? 1 : 0
}

//更新版本
const updatedVersion = () => {
  formDialog.visible = true
}

// 新增/编辑
const formDialog = reactive({
  visible: false,
  id: 0
})
</script>

<style scoped lang="scss">
.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  padding-bottom: 30px;
}
.upload-tx {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 10px;
  span {
    color: #46a6ff;
  }
}
.upload {
  margin-bottom: 30px;
}
.form {
  width: 100%;
  .form-item {
    width: 100%;
    display: flex;
    margin-bottom: 24px;
    .form-item-left {
      width: 500px;
      display: flex;
      align-items: center;
      .form-label {
        font-size: 14px;
        color: #000;
      }
      .form-input {
        flex: 1;
      }
    }
    .form-item-rig {
      flex: 1;
      margin-left: 20px;
    }
  }
}
.table {
  width: 100%;
  margin-bottom: 50px;
  .table-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .table-header-title {
      font-size: 14px;
      color: #000;
      span {
        color: #999;
      }
    }
    .table-header-input {
      margin-left: 200px;
    }
  }
  .table-content {
    width: 80%;
    display: flex;
    .table-content-title {
      width: 100%;
      font-size: 14px;
      color: #333;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .table-content-left {
      width: 240px;
      border: 1px solid rgba(233, 233, 233, 1);
      box-sizing: border-box;
      padding: 20px 0 20px 20px;
      .scroll-y {
        max-height: 400px;
        margin-bottom: 20px;
        .table-list {
          width: 100%;
          height: 46px;
          font-size: 14px;
          color: #595959;
          box-sizing: border-box;
          padding-left: 30px;
          display: inline-flex;
          align-items: center;
          cursor: pointer;
          position: relative;
        }
        .table-list:hover {
          background: #e6f7ff;
        }
        .table-list:hover:after {
          content: '';
          width: 4px;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          background: #1890ff;
        }
        .active {
          background: #e6f7ff;
        }
        .active:after {
          content: '';
          width: 4px;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          background: #1890ff;
        }
      }
    }
    .table-content-right {
      flex: 1;
      box-sizing: border-box;
      padding: 20px;
      border: 1px solid rgba(233, 233, 233, 1);
    }
  }
}
</style>
